<template>
	<div class="img-popover">
		<el-popover :placement="placement" title="" trigger="hover" :disabled="show">
			<img class="img-enlarge" :src="src" :style="{ width: width , background:baColor}" />
			<img v-if="src!=''" slot="reference" :src="src" style="width: 50px; height: 50px; vertical-align: top;" :style="{background:baColor}"
			 @mouseout="hoverOut" @mouseover="hoverOver" />
			<el-image v-if="src==''" slot="reference" :src="src" style="width: 50px; height: 50px; vertical-align: top;" :style="{background:baColor}"
			 @mouseout="hoverOut" @mouseover="hoverOver">
				<div slot="error" class="image-slot">
					<i class="el-icon-picture-outline"></i>
				</div>
			</el-image>
		</el-popover>
	</div>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: '400px'
			},
			baColor: {
				type: String,
				default: '#fff'
			},
			src: {
				type: String,
				default: ''
			},
			placement: {
				type: String,
				default: 'left'
			}
		},
		data() {
			return {
				show: false
			};
		},
		watch: {},
		mounted() {},
		beforeDestroy() {},
		methods: {
			hoverOut() {
				this.show = true;
			},
			hoverOver() {
				this.show = false;
			}
		}
	};
</script>

<style scoped="scoped">
	.img-popover .el-icon-picture-outline {
		line-height: 50px;
		font-size: 20px;
	}
</style>
